<template>
	<view class="page-view">
		<u-navbar :is-back="true" title="我的账号" :background="{ background: '#000000' }" height="42" title-color="#fff"
			back-icon-color="#ebd093" :border-bottom="false">
			<view class="navbar-right" slot="right">
				<view class="message-box right-item">
					<u-icon @click="pageIndexEnd" name="close-circle-fill" size="38" color="#ebd093" style="margin-right: 20rpx;"></u-icon>
				</view>
			</view>
		</u-navbar>

		<view class="user-head">
			<view class="user-box">
				<view class="user-img-box">
					<view class="user-img">
						<image class="user-photo" :src="image" mode=""></image>
					</view>
				</view>
				<view class="user-info">
					<view class="user-name-box">
						<text class="accouct">账号:</text>
						<text class="user-name-text"> {{user_name}}</text>
					</view>
					<view class="user-amount-box">
						<text class="accouct">余点:</text>
						<text class="amount"> {{user_money}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="user-tabs">
			<view class="user-tab-item" :class="userPage.pageName == userTabPage ? 'user-tab-item-active' : ''"
				v-for="(userPage, index) in userTabPageList" :key="index" @tap="switchPage(userPage.pageName)">
				<view class="user-tab-item-body">
					<u-icon :name="userPage.icon" size="40"></u-icon>
					<view>{{ userPage.name }}</view>
				</view>
			</view>
		</view>

		<view class="user-info-body">
			<view class="info-btns" v-if="userTabPage == 'account'">
				<view class="info-btn" :class="accountPage == 'baseSet' ? 'info-btn-active' : ''" v-if="loginUserInfo.is_fictitious!=1">
					<view class="btn-text" @click="accountPage = 'baseSet'">账户设置</view>
				</view>
				<view class="info-btn" :class="accountPage == 'safety' ? 'info-btn-active' : ''">
					<view class="btn-text" @click="accountPage = 'safety'">个人账户安全认证</view>
				</view>
				<view class="info-btn" :class="accountPage == 'problem' ? 'info-btn-active' : ''">
					<view class="btn-text" @click="accountPage = 'problem'">安装APP后未受信任解决办法</view>
				</view>
				<view class="info-btn" :class="accountPage == 'baseSet' ? 'info-btn-active' : ''" v-if="loginUserInfo.is_fictitious==1">
					<view class="btn-text" @click="logout()">退出登录</view>
				</view>
			</view>
			<view class="info-btns-date" v-else>
				<view class="info-btn" :class="date == 'today' ? 'info-btn-active' : ''">
					<view class="btn-text" @click="date = 'today'">今日</view>
				</view>
				<view class="info-btn" :class="date == 'yesterday' ? 'info-btn-active' : ''">
					<view class="btn-text" @click="date = 'yesterday'">昨日</view>
				</view>
				<view class="info-btn" :class="date == 'week' ? 'info-btn-active' : ''">
					<view class="btn-text" @click="date = 'week'">本周</view>
				</view>
				<view class="info-btn" :class="date == 'month' ? 'info-btn-active' : ''">
					<view class="btn-text" @click="date = 'month'">本月</view>
				</view>
			</view>
			<userAccount :page="accountPage" v-if="userTabPage == 'account'&&loginUserInfo.is_fictitious!=1"></userAccount>
			<userWallet :date="date" :userTabPage="userTabPage" v-if="userTabPage == 'wallet'"></userWallet>
			<userNote :date="date" :userTabPage="userTabPage" v-if="userTabPage == 'note'"></userNote>
			<userLoseLoss :date="date" :userTabPage="userTabPage" v-if="userTabPage == 'loseLoss'"></userLoseLoss>

		</view>
	</view>
</template>

<script>
	import userAccount from './userAccount.vue'
	import userWallet from './userWallet.vue'
	import userNote from './userNote.vue'
	import userLoseLoss from './userLoseLoss.vue'
	import user from "@/api/api"

	export default {
		components: {
			userAccount,
			userWallet,
			userNote,
			userLoseLoss
		},
		data() {
			return {
				image:'/static/img/user/header.png',
				loadingImg:'/static/img/user/header.png',
				errorImg:'/static/img/user/header.png',
				
				userTabPageList: [{
					id: 1,
					icon: 'account',
					name: '我的账户',
					pageName: 'account',
				}, {
					id: 2,
					icon: 'calendar-fill',
					name: '我的钱包',
					pageName: 'wallet',
				}, {
					id: 3,
					icon: 'order',
					name: '我的注单',
					pageName: 'note',
				}, {
					id: 4,
					icon: 'moments',
					name: '我的输赢',
					pageName: 'loseLoss',
				}, ],
				userTabPage: 'account',
				accountPage: 'baseSet',
				date: 'today', //today,yesterday,week,month
				user_name: '',
				user_money: 0,
				//用户登录信息
				loginUserInfo: uni.getStorageSync('login_user_info')
			};
		},
		mounted() {
			this.userinfo();
		},
		methods: {
			switchPage(pageName) {
				this.userTabPage = pageName
				this.date = 'today'
			},
			pageIndexEnd(){
				this.$router.push('/pages/index/index')
			},
			userinfo() {
				user.getUserInfo().then((res) => {
					if (res.data.code == 200) {
						this.user_name = res.data.data.user_name
						this.user_money = res.data.data.money_balance
					} else {
						this.$tip.alert(res.data.message);
					}
				})
			},
			//退出登录
			logout(){
				uni.removeStorageSync('login_user_info')
				uni.removeStorageSync('Access-Token')
				this.$router.push('/pages/login/login')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.user-photo{
		height: 100%;
		width: 100%;
	}
	$gradientBackground: linear-gradient(to right, #af9a6e, #f5d89a);

	.page-view {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #1D1C22;

		.user-head {
			height: 252rpx;

			.user-box {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.user-img-box {
					width: 136rpx;
					height: 136rpx;
					border-radius: 50%;
					border: 2rpx solid #ebd093;
					display: flex;
					justify-content: center;
					padding: 4rpx;

					.user-img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						overflow: hidden;
					}
				}

				.user-info {
					margin-left: 28rpx;
					.user-name-box,.user-amount-box{
						width: 270rpx;
						height: 40rpx;
						border-radius: 20rpx;
						border: 2rpx solid #666;
						margin-top: 8rpx;
						padding-left: 8rpx;
						line-height: 40rpx;
						color: #FFFFFF;
						//text-align: center;
						font-size: 24rpx;
					}
					.user-name-box {
						.user-name-text {
							margin-left: 12rpx;
						}
						.accouct{
							margin-left: 12rpx;
						}
					}

					.user-amount-box {
						

						.amount {
							margin-left: 12rpx;
						}
						.accouct{
							margin-left: 12rpx;
						}	
					}
				}
			}

		}

		.user-tabs {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #555360;

			.user-tab-item {
				width: 25%;
				height: 108rpx;
				text-align: center;
				border-right: 2rpx solid #555360;

				.user-tab-item-body {
					width: 100%;
					height: 100%;
				}
			}

			.user-tab-item-active {
				color: #ebd093;

				.user-tab-item-body {
					border-bottom: 6rpx solid;
					border-image: $gradientBackground 30 30;
				}
			}
		}

		.user-info-body {
			padding: 40rpx 10rpx 0 8rpx;

			.info-btn {
				padding: 0 12rpx 4rpx 12rpx;

				color: #7f7f7f;
				height: 60rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				border: 2rpx solid #666;

				.btn-text {
					width: 100%;
					height: 52rpx;
					line-height: 52rpx;
					white-space: nowrap;
					transform: scale(.9);
				}
			}

			.info-btn-active {
				background: $gradientBackground;
				color: #1D1C22;
			}

			.info-btns {
				display: flex;
				align-items: center;
				margin-bottom: 48rpx;

				.info-btn {
					margin-right: 20rpx;

					.btn-text {
						font-weight: 800;
					}

				}
			}

			.info-btns-date {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 36rpx;

				.btn-text {
					padding: 0 44rpx;
					transform: none;
				}
			}



		}

	}
</style>
